<template>
    <div class="header">
        <div class="home-options" v-show="false" @beenClick="ShowUp">
            <div class="header-picture">
            <img src="../../../assets/picture/2.jpg" class="picture"  @click="handleShowOptions">
            </div>
            <div>
              ID：乱七八糟
            </div>
            <div>
              <p><span class="iconfont">&#xe609;</span>首页</p>
            </div>
            <div>
              <p><span class="iconfont">&#xe746;</span>我的收藏</p>
            </div>
             <div>
              <p><span class="iconfont">&#xe61d;</span>历史记录</p>
            </div>
            <div>
              <p><span class="iconfont">&#xe613;</span>个人资料</p>
            </div>
        </div>
        <div class="header-left">
          <span class="iconfont">&#xe745;</span>
        </div>
        <div class="header-picture">
          <img src="../../../assets/picture/2.jpg" class="picture">
        </div>
        <div class="header-center">
          <span class="iconfont">&#xe60a;</span>
          输入电影名搜索
        </div>
        <div class="header-right">
          <span class="iconfont">&#xe61d;</span>
          <span class="iconfont another-icon">&#xe61e;</span>
        </div>
    </div>
</template>

<script>
export default {
  name: 'HomeHeader',
  methods: {
    handleShowOptions: function () {
      this.$emit('beenClick')
    },
    ShowUp: function () {
      this.show = true
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~styles/varibles.styl'
    .header
      line-height: .86rem
      display: flex
      color: #fff
      background $bgColor
      .home-options
        width:45%
        height: 0
        overflow: hidden
        padding-bottom: 85%
        background:green
        .iconfont
          padding-left:.1rem
          padding-right:.2rem
      .header-left
        width: .60rem
        float: left
        text-align:center
      .header-picture
        width: .86rem
        height: .86rem
        border-radius: .43rem
        overflow hidden    //圆形相片
        .picture
          width:100%
          height:100%
          overflow hidden //圆形相片
      .header-center
        flex: 1
        height: .64rem
        line-height: .64rem
        margin-top: .12rem
        margin-left: .2rem
        padding-left: .1rem
        background:#fff
        border-radius: .1rem
        color: #ccc
      .header-right
        width: 1.40rem
        float: right
        text-align:center
        .another-icon
          margin-left:.14rem
</style>
